<template>
  <view class="page">
    <view class="tab">
      <scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
        :scroll-with-animation="true">
        <view class="tab-item" v-for="(item,index) in tabList" :key="index"
          :class="{'tab-item-select':index==selectIndex}" :id="'tabId'+index" @click="changeTab(item,index)">
          <text style="font-size:30rpx;">{{item.title}}</text>
          <view class="tab-item-line" v-if="index==selectIndex"></view>
        </view>
      </scroll-view>
    </view>
    <view class="context">
      <swiper class="swiper" :current="selectIndex" @change="changeSwiper">
        <swiper-item v-for="(item,index) in tabList" :key="index">
          <scroll-view scroll-y="true" class="scroll-Y-chunk" :show-scrollbar='false'>
            <view class="context-box-item">
              <view class="context-box-item-chunk" v-for="(item,index1) in item.list" :key="index1"
                @click="goPage(item)">
                <view class="context-box-item-chunk-image">
                  <view class="context-box-item-chunk-image-shadow">
                    <image style="width: 50rpx; height: 50rpx;" :src="item.image"></image>
                  </view>
                </view>
                <view class="context-box-item-chunk-title">{{item.title}}</view>
                <view class="context-box-item-chunk-text">{{item.content}}</view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      selectIndex: 1,
      scrollTabId: 'tabId0',
      message: 'aa',
      tabList: [
        {
          title: '全部',
          type: 0,
          list: []
        },
        {
          title: '热门',
          type: 1,
          list: []
        },
        {
          title: '媒体写作',
          type: 2,
          list: []
        },
        {
          title: '短视频',
          type: 3,
          list: []
        },
        {
          title: '教育(论文)',
          type: 4,
          list: []
        },
        {
          title: '电商',
          type: 5,
          list: []
        },
        {
          title: '营销广告',
          type: 6,
          list: []
        },
        {
          title: '网站',
          type: 7,
          list: []
        },
        {
          title: '文学',
          type: 8,
          list: []
        },
      ],
      contextList: [
		  
        {
          type: [1,8],
          image: '/static/create/create_cz.jpg',
          title: '小说',
          content: '生成各种风格类型小说',
          url:'/pages_create/fiction/fiction',
        },
        {
          type: [1, 4],
          image: '/static/create/create_lw.jpg',
          title: '学生作文',
          content: '为中小学生题目提供优秀范文',
          url: '/pages_aiTools/studentComposition/studentComposition'
        },
        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.jpg',
        //     title: '学生作文',
        //     content: '为中小学生题目提供优秀范文',
        //     url:'/pages/studentComposition/studentComposition'
        //   },
        //   {
        //     type: 1,
        //     image: '/static/create/create_lw.jpg',
        //     title: '论文',
        //     content: '为中小学生题目提供优秀范文',
        //     url:'/pages/paper/paper'
        //   },
        // {
        //   type: [1, 3],
        //   image: '/static/create/create_dsp.png',
        //   title: '短视频',
        //   content: '为你提供各种视频模板',
        //   url: '/pages/video/video'
        // },
        // {
        //   type: 3,
        //   image: '/static/create/create_dsp.png',
        //   title: '短视频',
        //   content: '为你提供各种视频模板',
        //   url: '/pages/video/video'
        // },
        {
          type: [1,8],
          image: '/static/create/create_cz.jpg',
          title: '诗歌情诗',
          content: '一键生成各种类型的精美诗词',
          url: '/pages_create/lovePoems/lovePoems'
        },

        {
          type: [1,2],
          image: '/static/create/create_cp.png',
          title: '新媒体全文写作',
          content: '一键生成新媒体文章（大约30秒）',
          url: '/pages_create/newMedia/newMedia'
        },
		{
		  type: [1,2],
		  image: '/static/create/create_xz.png',
		  title: '影视解说',
		  content: '一键生成影视解说文案',
		  url: '/pages_create/movie/movie'
		},
		{
		  type: [1,2],
		 image: '/static/create/create_lw.jpg',
		  title: '教案计划',
		  content: '一键生成教案计划',
		  url: '/pages_create/student/student'
		},
        {
          type: [1,7],
          image: '/static/create/create_eso.png',
          title: '网站',
          content: '生成针对各种网站的内容以及文案',
          url: '/pages_create/Web/Web'
        },
        {
          type: [1,6],
          image: '/static/create/create_cp.png',
          title: '广告',
          content: '生成针对各种广告的内容以及文案',
          url: '/pages_create/advertising/advertising'
        },
        {
          type: [1,2],
          image: '/static/create/create_taobao.png',
          title: '好评文案',
          content: '生成针对各种广告的内容以及文案',
          url: '/pages_create/reputation/reputation'
        },
        {
          type: 1,
          image: '/static/create/create_dy.png',
          title: '大厨私房菜',
          content: '一键生成各菜系菜单',
          url: '/pages_create/kitchen/kitchen'
        },
        {
          type: 1,
          image: '/static/create/create_cz.jpg',
          title: '梦境分析',
          content: '为你的梦境进行详细分解',
          url: '/pages_create/dream/dream'
        },
        {
          type: [1,2],
          image: '/static/create/create_lw.jpg',
          title: '概括总结',
          content: '为你生成各个场景下的总结',
          url: '/pages_create/summarize/summarize'
        },
        {
          type: [1,2],
          image: '/static/create/create_lw.jpg',
          title: '发言稿',
          content: '为你编撰演讲稿',
          url: '/pages_create/statement/statement'
        },
        {
          type: 2,
          image: '/static/create/create_xz.png',
          title: '全文写作',
          content: '按照写作步骤一步步生成文章',
          url: '/pages_create/fullText/fullText'
        },

        {
          type: 2,
          image: '/static/create/create_dsp.png',
          title: '万能翻译',
          content: '一键式多语言翻译',
          url: '/pages_create/translate/translate'
        },

        {
          type: 5,
          image: '/static/create/create_taobao.png',
          title: '电商',
          content: '根据产品特点生成各种内容，优化等',
          url: '/pages_create/e-commerce/e-commerce'
        },
        {
          type: 5,
          image: '/static/create/create_cp.png',
          title: '合同模板',
          content: '生成各种合同模板',
          url: '/pages_create/contract/contract'
        },
        // {
        //   type: 5,
        //   image: '/static/create/create_taobao.png',
        //   title: '产品特性描述',
        //   content: '生成一条多角度描述产品特色的文案',
        //   url: '/pages_create/productDescribe/productDescribe'

        // },
        {
          type: [1, 2],
          image: '/static/create/create_xhs.png',
          title: '小红书笔记标题',
          content: '为你的小红书笔记生成充满点击欲的标题',
          url: '/pages_create/redBook/redBook'

        },
        {
          type: [1, 3],
          image: '/static/create/create_dsp.png',
          title: '短视频带货文案',
          content: '一键生成带货金句，让你的商品不愁买家',
          url: '/pages_create/shortVideo/shortVideo'
        },
        {
          type: 2,
          image: '/static/create/create_wx.png',
          title: '文章主题及大纲',
          content: '为你提供文章主题的新灵感 并为其创建推文提纲',
          url: '/pages_create/articleOutline/articleOutline'

        },
        {
          type: 7,
          image: '/static/create/create_eso.png',
          title: '网站首页SEO优化',
          content: '为文章标题和简述进行SEO优化',
          url: '/pages_create/webSEO/webSEO'
        },
        {
          type: 5,
          image: '/static/create/create_cp.png',
          title: '产品简介',
          content: '生成让人想下单的产品介绍文案',
          url: '/pages_create/introduceProduct/introduceProduct'
        },
        {
          type: 3,
          image: '/static/create/create_dy.png',
          title: '抖音带货标题',
          content: '一键生成带货标题，省时省力',
          url: '/pages_create/dySell/dySell'
        },

        // {
        //   type: [1,8],
        //   image: '/static/create/create_zh.jpg',
        //   title: '知乎问答',
        //   content: '生成一些能够引起热烈讨论的好问题',
        //   url: '/pages_create/zhihuAnswer/zhihuAnswer'
        // },

        {
          type: [1,2],
          image: '/static/create/create_xmt.png',
          title: '新媒体文章标题',
          content: '根据输入的关键词生成引人入胜的文章标题',
          url: '/pages_create/newMediaTitle/newMediaTitle'
        },

        {
          type: 4,
          image: '/static/create/create_cz.jpg',
          title: '学科出题',
          content: '一家生成各个学科题目',
          url: '/pages_create/SubjectIssue/SubjectIssue'
        },
        {
          type: 4,
          image: '/static/create/create_cz.jpg',
          title: '学习计划',
          content: '针对各阶段学科生成学习计划',
          url: '/pages_create/studyPlan/studyPlan'
        },
        {
          type: 4,
          image: '/static/create/create_lw.jpg',
          title: '考研题目',
          content: '针对考验生成各个学科的题目',
          url: '/pages_create/ordeal/ordeal'
        },
        {
          type: 4,
          image: '/static/create/create_xmt.png',
          title: '文章主题及大纲',
          content: '为你提供文章主题的新灵感并为其创建推文提纲',
          url: '/pages/articleOutline/articleOutline'
        },
        {
          type: [1,2],
          image: '/static/create/create_xmt.png',
          title: '回复老板',
          content: '一键生成各种场景下回复老板文案',
          url: '/pages_create/Boss/Boss'
        },
        {
          type: [1,2],
          image: '/static/create/create_xmt.png',
          title: '日报/周报/月报',
          content: '根据工作内容生成日报，周报，月报',
          url: '/pages_create/reports/reports'
        },
        {
          type: [1, 2],
          image: '/static/create/create_xhs.png',
          title: '小红书种草文案',
          content: '根据产品特点，帮你生成复合小红书调性的分享文案（文字更简洁）',
          url: '/pages_create/redBookWriting/redBookWriting'
        },
        {
          type: [1,2],
          image: '/static/create/create_xhs.png',
          title: '小红书旅游攻略',
          content: '根据目的地和旅游天数生成旅游的攻略',
          url: '/pages_aiTools/reedBooktravel/reedBooktravel'
        },
        {
          type: 2,
          image: '/static/create/create_cz.jpg',
          title: '邮件撰写',
          content: '一键撰写各种类型邮件',
          url: '/pages_aiTools/Email/Email'
        },
        {
          type: 2,
          image: '/static/create/create_cz.jpg',
          title: 'SWOT分析法',
          content: '基于内外部竞争环境和竞争条件下的态势分析',
          url: '/pages_aiTools/SWOT/SWOT'
        },
        //   {
        //     type: 2,
        //     image: '/static/create/create_wx.png',
        //     title: '文章开头段',
        //     content: '一键生成新媒体文章的开头段',
        //     url:'/pages/ArticleStart/ArticleStart'
        //   },

        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.png',
        //     title: '论文大纲',
        //     content: '根据论文题目和关键词生成论文大纲',
        //     url:'/pages/paperOutline/paperOutline'
        //   },
        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.png',
        //     title: '论文摘要',
        //     content: '根据论文题目和关键词生成论文摘要',
        //     url:'/pages/paperAbstract/paperAbstract'
        //   },
        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.png',
        //     title: '论文标题',
        //     content: '根据关键词生成论文标题',
        //     url:'/pages/paperArtical/paperArtical'
        //   },
        //   {
        //     type: 2,
        //     image: '/static/create/create_wx.png',
        //     title: '文章SEO优化',
        //     content: '对文章标题和简述进行SEO优化',
        //     url:'/pages/articleSEO/articleSEO'
        //   },
        {
          type: 3,
          image: '/static/create/create_dy.png',
          title: '带货视频口播稿',
          content: '带货视频口播稿',
          url: '/pages_aiTools/dyOralDraft/dyOralDraft'
        },
        //   {
        //     type: 2,
        //     image: '/static/create/create_wx.png',
        //     title: '文章章节内容',
        //     content: '讲一个主题句扩写成媒体文章段落',
        //     url:'/pages/articleChapter/articleChapter'
        //   },
        {
          type: 3,
          image: '/static/create/create_dy.png',
          title: '视频灵感',
          content: '蹭点热点拍视频？让我们来提供灵感',
          url: '/pages_aiTools/dyInspiration/dyInspiration'
        },
        {
          type: [1,8],
          image: '/static/create/create_zh.jpg',
          title: '知乎问题',
          content: '对知乎的问题进行深度解答',
          url: '/pages_aiTools/zhihuQuestion/zhihuQuestion'
        },
        {
          type: [1,6],
          image: '/static/create/create_xz.png',
          title: '营销文案-戳痛点',
          content: '戳中用户痛点，打造爆款产品',
          url: '/pages_aiTools/marketing/marketing'
        },
        //   {
        //     type: 3,
        //     image: '/static/create/create_dy.png',
        //     title: '视频吸睛开头',
        //     content: '用视频的开头黄金5秒，锁定观众的注意力',
        //     url:'/pages/dyAction/dyAction'
        //   },
        //   {
        //     type: 3,
        //     image: '/static/create/create_dy.png',
        //     title: '视频标题',
        //     content: '快速帮你打造有吸引力的视频标题',
        //     url:'/pages/dyTitle/dyTitle'
        //   },
        {
          type: 6,
          image: '/static/create/create_xz.png',
          title: '营销文案-引导下单',
          content: '对文章标题和简述进行SEO优化',
          url: '/pages_aiTools/marketingGuide/marketingGuide'
        },
        //   {
        //     type: 3,
        //     image: '/static/create/create_dy.png',
        //     title: '短视频脚本大纲',
        //     content: '生成vlog、口播稿等短视频的拍摄大纲',
        //     url:'/pages/dyScript/dyScript'
        //   },
        //   {
        //     type: 3,
        //     image: '/static/create/create_dy.png',
        //     title: '视频介绍',
        //     content: '对文章标题和简述进行SEO优化',
        //     url:'/pages/dyIntroduce/dyIntroduce'
        //   },
        {
          type: 6,
          image: '/static/create/create_dy.png',
          title: '“离婚式”广告',
          content: '离婚式广告,接头文案的神',
          url: '/pages_aiTools/adDivorce/adDivorce'
        },
        //   {
        //     type: 5,
        //     image: '/static/create/create_taobao.png',
        //     title: '产品卖点罗列',
        //     content: '提炼差异化的产品卖点，让你的产品在同行中脱颖而出',
        //     url:'/pages/productSelling/productSelling'
        //   },
        //   {
        //     type: 3,
        //     image: '/static/create/create_dy.png',
        //     title: '短视频分镜灵感',
        //     content: '对文章标题和简述进行SEO优化',
        //     url:'/pages/dyStoryboard/dyStoryboard'
        //   },
        //   {
        //     type: 5,
        //     image: '/static/create/create_taobao.png',
        //     title: '商品优质好评',
        //     content: '根据产品特点为你生成超像真人写的好评',
        //     url:'/pages/Productreputation/Productreputation'
        //   },

        //   {
        //     type: 6,
        //     image: '/static/create/create_xz.png',
        //     title: 'Slogan广告语',
        //     content: '为企业、产品、网站生成Slogan',
        //     url:'/pages/adSlogan/adSlogan'
        //   },
        //   {
        //     type: 6,
        //     image: '/static/create/create_bd.jpg',
        //     title: '广告描述',
        //     content: '生成一条拥有精准洞察的广告标语',
        //     url:'/pages/adDescribe/adDescribe'
        //   },
        //   {
        //     type: 6,
        //     image: '/static/create/create_bd.jpg',
        //     title: '广告标语',
        //     content: '为网站生成元描述，激发用户了解欲',
        //     url:'/pages/adSlogan2/adSlogan2'
        //   },
        //   {
        //     type: 6,
        //     image: '/static/create/create_fb.jpg',
        //     title: 'facebook广告标题',
        //     content: '为你的Facebook广告创造“标题”',
        //     url:'/pages/facebookTitle/facebookTitle'
        //   },
        //   {
        //     type: 6,
        //     image: '/static/create/create_fb.jpg',
        //     title: 'facebook广告描述',
        //     content: '为你的Facebook广告生成完美的主要内容',
        //     url:'/pages/facebookDescribe/facebookDescribe'
        //   },
        //   {
        //     type: 7,
        //     image: '/static/create/create_web.jpg',
        //     title: '网页大标题',
        //     content: '为你的网站创建高点击率的大标题',
        //     url:'/pages/WebTitle/WebTitle'
        //   },
        {
          type: 7,
          image: '/static/create/create_web.jpg',
          title: '公司背景',
          content: '创作一段能引起共鸣的公司背景介绍',
          url: '/pages_aiTools/company/company'
        },
        //   {
        //     type: 7,
        //     image: '/static/create/create_web.jpg',
        //     title: '产品核心价值',
        //     content: '一句话阐明产品的核心价值',
        //     url:'/pages/companyKernel/companyKernel'
        //   },
        //   {
        //     type: 7,
        //     image: '/static/create/create_web.jpg',
        //     title: '产品核心要点',
        //     content: '耐克篮球鞋与新一代气垫',
        //     url:'/pages/companyCore/companyCore'
        //   },
        //   {
        //     type: 7,
        //     image: '/static/create/create_web.jpg',
        //     title: '创意故事',
        //     content: '帮你续写创意故事',
        //     url:'/pages/storage/storage'
        //   },
        {
          type: 8,
          image: '/static/create/create_xz.png',
          title: '人物塑造',
          content: '一键生成生动的人物',
          url: '/pages_aiTools/characterization/characterization'
        },
        //   {
        //     type: 7,
        //     image: '/static/create/create_web.jpg',
        //     title: '公司或产品起名',
        //     content: '提供源源不断的起名灵感',
        //     url:'/pages/webNaming/webNaming'
        //   },
        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.jpg',
        //     title: '雅思大作文',
        //     content: '根据题目生成雅思写作题答案',
        //     url:'/pages/IELTS/IELTS'
        //   },
        //   {
        //     type: 4,
        //     image: '/static/create/create_lw.jpg',
        //     title: '学生会活动策划',
        //     content: '根据主题生成学生会活动策划案',
        //     url:'/pages/studentPlanning/studentPlanning'
        //   },

        //   {
        //     type: 8,
        //     image: '/static/create/create_xz.png',
        //     title: '赛博朋克鬼故事',
        //     content: '夏天听个鬼故事冷静冷静',
        //     url:'/pages/ghostStories/ghostStories'
        //   },
        //   {
        //     type: 8,
        //     image: '/static/create/create_xz.png',
        //     title: '疯狂星期四',
        //     content: 'V-ME-50,瞧瞧实力？',
        //     url:'/pages/crazyThursday/crazyThursday'
        //   },
        //   {
        //     type: 8,
        //     image: '/static/create/create_cz.jpg',
        //     title: '对联',
        //     content: '替你写一幅对仗工整的对联',
        //     url:'/pages/couplet/couplet'
        //   },
        {
          type: 8,
          image: '/static/create/create_cz.jpg',
          title: '散文',
          content: '为你写一篇文辞优美的散文',
          url: '/pages_aiTools/prose/prose'
        },

      ]
    }
  },
  onLoad () {
    //   console.log('onInit',this.tabList[1].List)
    let that = this
    // let newList =[];
    this.contextList.forEach(item => {
      const types = Array.isArray(item.type) ? item.type : [item.type];
      types.forEach(type => {
        switch (type) {
          case 1:
            that.tabList[1].list.push(item);
            break;
          case 2:
            that.tabList[2].list.push(item);
            break;
          case 3:
            that.tabList[3].list.push(item);
            break;
          case 4:
            that.tabList[4].list.push(item);
            break;
          case 5:
            that.tabList[5].list.push(item);
            break;
          case 6:
            that.tabList[6].list.push(item);
            break;
          case 7:
            that.tabList[7].list.push(item);
            break;
          case 8:
            that.tabList[8].list.push(item);
            break;
          case 9:
            that.tabList[9].list.push(item);
            break;
          case 10:
            that.tabList[10].list.push(item);
            break;
          default:
            break;
        }
      });
    });

    this.$set(this, 'tabList', this.tabList);
    this.tabList[0].list = this.contextList
    //   console.log("?? ~ file: create.vue:193 ~ onLoad ~ this.contextList:", this.contextList)
  },
  methods: {
    onShareAppMessage: function (res) {
      const that = this
      let userid = uni.getStorageSync('baseinfopro').userid
      if (res.from === 'button') { // 来自页面内分享按钮
        console.log(res.target, 'res.target')
      }
      return {
        title: 'AI写作神器，一键改写变原创。',
        path: "pages/home/home?userid=" + userid,
        imageUrl: "../../static/other/share.png",
        success: function (res) {
          console.log(
            "--------------转发成功--------------------",
            res,
            userid
          );
        }
      }
    },
    onShareTimeline: function (res) { },
    //切换tab
    changeTab (item, index) {
      console.log(item.list)
      console.log(item, index, '切换的tab')
      this.selectIndex = index
      let number = (index - 1) < 0 ? 0 : (index - 1)
      this.scrollTabId = 'tabId' + number
    },
    //切换swiper
    changeSwiper (e) {
      console.log(e, '切换的swiper')
      this.selectIndex = e.detail.current
      let number = (e.detail.current - 1) < 0 ? 0 : (e.detail.current - 1)
      this.scrollTabId = 'tabId' + number
    },
    goPage (item, index) {
      console.log("?? ~ file: create.vue:210 ~ goPage ~ item:", item, index)
      if (item.url) {
        console.log("?? ~ file: tooles.vue:744 ~ goPage ~ item.url:", item.url)
        uni.navigateTo({
          url: item.url
        });
      } else {
        uni.showToast({
          title: '暂未开放',
          icon: 'none',
          duration: 2000
        });
      }
    },
  }
}
</script>
<style lang="less">
.page {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
}
.tab {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  .scroll-X {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    .tab-item {
      height: 100%;
      padding: 0rpx 40rpx;
      color: #8b8b8b;
      display: inline-block;
      line-height: 100rpx;
      position: relative;
      .tab-item-line {
        width: 30rpx;
        height: 6rpx;
        position: absolute;
        bottom: 14rpx;
        left: 50%;
        transform: translateX(-50%);
        background-color: #4bb591;
      }
    }
    .tab-item-select {
      color: #333333;
    }
  }
}
.context {
  width: 100%;
  height: calc(100vh - 100rpx);
  background-color: #f7f7f7;
  box-sizing: border-box;
  .swiper {
    width: 100%;
    height: 100%;
    .scroll-Y-chunk {
      width: 100%;
      height: 100%;
      .context-box-item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        box-sizing: border-box;
        padding: 30rpx 30rpx 10rpx;
        .context-box-item-chunk {
          width: 48%;
          height: 270rpx;
          background-color: #fff;
          margin-bottom: 30rpx;
          box-sizing: border-box;
          padding-left: 40rpx;
          box-shadow: 1px 1px 8px 2px #e4ecf1;
          .context-box-item-chunk-image {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            .context-box-item-chunk-image-shadow {
              padding: 6rpx;
              background-color: #e5e0e0;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .context-box-item-chunk-title {
            width: 100%;
            color: #333333;
            font-size: 28rpx;
            margin-top: 20rpx;
          }
          .context-box-item-chunk-text {
            width: 100%;
            font-size: 22rpx;
            color: #939393;
            margin-top: 20rpx;
            box-sizing: border-box;
            padding-right: 20rpx;
          }
        }
      }
    }
  }
}
/deep/::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
</style>
